<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import { useEquip } from "@/stores/useEquip";
import * as echarts from "echarts";
import { equip2 } from "@/configs/equip";
import { onEquipInited } from "@/utils/init";
import { datetimeFormat } from "@/utils/date";

const chart = {
    instance: null as echarts.ECharts | null,
    option: {
        tooltip: { trigger: "axis" },
        color: ["rgb(241, 247, 97)", "rgb(26, 211, 213)"],
        legend: { right: "10%", icon: "roundRect", itemHeight: 4, textStyle: { color: "#92dde1" } },
        grid: { left: "10%", top: "30", right: "5%", bottom: "30" },
        xAxis: {
            type: "category",
            axisLabel: { color: "#92dde1" },
            axisTick: { show: false },
            data: [] as string[],
        },
        yAxis: {
            type: "value",
            max: 40,
            axisLabel: { color: "#92dde1" },
            splitLine: { lineStyle: { color: "#104d4d" } },
        },
        series: [
            {
                name: "土壤温度",
                type: "line",
                smooth: true,
                symbol: "none",
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: "rgba(241, 247, 97, 0.8)" },
                        { offset: 1, color: "rgba(241, 247, 97, 0)" },
                    ]),
                },
                data: [] as number[],
            },
            {
                name: "土壤湿度",
                type: "line",
                smooth: true,
                symbol: "none",
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: "rgba(26, 211, 213, 0.8)" },
                        { offset: 1, color: "rgba(26, 211, 213, 0)" },
                    ]),
                },
                data: [] as number[],
            },
        ],
    },
};
interface Props {
    equip2V2: Equip.EquipInfo;
}
const equipStore = useEquip();
const props = withDefaults(defineProps<Props>(), {});
const oChart = ref<HTMLDivElement | null>(null);
watch(
    () => props.equip2V2.histories,
    () => updateChart(),
    { deep: true }
);
onMounted(async () => {
    chart.instance = echarts.init(oChart.value);
    chart.instance.setOption(chart.option);
    await onEquipInited();
    await equipStore.syncEquipHistory({ funid: props.equip2V2.fUNID, begintime: datetimeFormat(Date.now() - 86400000), endtime: datetimeFormat(Date.now()), second: 3600 });
    updateChart();
});
function updateChart() {
    chart.option.xAxis.data = props.equip2V2.histories.map((v) => datetimeFormat(v.time, "h:m"));
    chart.option.series[0].data = props.equip2V2.histories.map((v) => v.aiValues[equip2.soilTemperatureIndex]);
    chart.option.series[1].data = props.equip2V2.histories.map((v) => v.aiValues[equip2.soilHumidityIndex]);
    chart.instance?.setOption(chart.option);
}
</script>

<template>
    <section>
        <h3>
            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-zhiwu"></use></svg>
            <b>温湿度曲线</b>
            <span>Wen Shi Du Qu Xian</span>
        </h3>
        <hr class="to-right" />
        <div ref="oChart" class="content"></div>
    </section>
</template>

<style lang="scss" scoped>
@use "../styles/section.scss";
</style>
